import { Component, Input, OnInit, Host, Inject, forwardRef,ElementRef, Renderer2, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams,AlertController } from 'ionic-angular';
import { TopicInfo, RowInfo } from '../../models/quesinfo';


/**
 * Generated class for the QuestionMapPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
declare let BMap;
declare let BMapLib;
@Component({
  selector: 'page-question-map',
  templateUrl: 'question-map.html',
})
export class QuestionMapPage {
  @Input() topic: TopicInfo;@Input() poneSet: Array<any>;
  @Input() topicIndex;
  topicIndexshow;
  points=[];
  @ViewChild('map') map: ElementRef
  constructor(public navCtrl: NavController, public navParams: NavParams, private renderer: Renderer2,public alertCtrl: AlertController) {
  }
  ngOnInit(): void {
    this.topicIndexshow=this.topicIndex+1;
    //
    console.log(this.topic);
  }
  ionViewDidLoad() {
    //console.log('ionViewDidLoad QuestionMapPage');
  }
  showmap(){
    let el = this.map.nativeElement;
    this.renderer.addClass(el, 'mapmalshow');
    this.ionViewWillEnter();
  }
 ionViewWillEnter() {
    let map = new BMap.Map("container");
    // map.centerAndZoom(new BMap.Point(120.129721,30.314429), 6);

    map.enableContinuousZoom();//连续缩放效果，默认禁用
    map.enableScrollWheelZoom();//启动滚轮放大缩小，默认禁用

    let pp=new BMap.Point(this.topic.longitude,this.topic.lat);
    map.centerAndZoom(pp, 14);//设置中心和地图显示级别
    //
    let marker1 = new BMap.Marker(pp);
    map.addOverlay(marker1);

    let geoc = new BMap.Geocoder();
    var temp;
    map.addEventListener("click", function (e) {
      map.removeOverlay(marker1);
      pp.lng = e.point.lng;
      pp.lat = e.point.lat;
      marker1 = new BMap.Marker(pp);
      map.addOverlay(marker1);

      let pt = e.point;
      geoc.getLocation(pt, function (rs) {
      let addComp = rs.addressComponents;
      // temp=addComp.longitude;
      document.getElementById('province').innerText=addComp.province;
      document.getElementById('city').innerText=addComp.city;
      document.getElementById('district').innerText=addComp.district;
      document.getElementById('street').innerText=addComp.street;
      document.getElementById('streetNumber').innerText=addComp.streetNumber;
      document.getElementById('lat').innerText=pp.lat;
      document.getElementById('longitude').innerText=pp.lng;
      });
    })
  };
  save(){
    if(!document.getElementById('province').innerText){
      let confirm = this.alertCtrl.create({
        title: '请选择位置',
        buttons: [
          {
            text: '确定',
            handler: () => {
            }
          }
        ]
    
      });
      confirm.present();
    }else{
      // alert(document.getElementById('province').innerText);
      let province=document.getElementById('province').innerText;
      let city=document.getElementById('city').innerText;
      let district=document.getElementById('district').innerText;
      let street=document.getElementById('street').innerText;
      let streetNumber=document.getElementById('streetNumber').innerText;
      let lat=document.getElementById('lat').innerText;
      let longitude=document.getElementById('longitude').innerText;
      this.topic.Address=province + "-" + city + "-" + district+ "-" + street + "" + streetNumber;
      this.topic.lat=lat;
      this.topic.longitude=longitude;
      let el = this.map.nativeElement;
      this.renderer.removeClass(el, 'mapmalshow');
    }
  }
  cancal(){
    let el = this.map.nativeElement;
    this.renderer.removeClass(el, 'mapmalshow');
  }
}
